<template>
  <div class="admin-layout">
    <aside class="sidebar">
      <div class="logo">
        <h2>{{ t('message.adminPanel') }}</h2>
      </div>

      <nav class="navigation">
        <router-link
          :to="{ name: 'admin-dashboard' }"
          class="nav-item"
          :class="{ active: $route.name === 'admin-dashboard' }"
        >
          <span class="nav-icon">📊</span>
          <span class="nav-text">{{ t('message.adminDashboard') }}</span>
        </router-link>

        <router-link
          :to="{ name: 'teacher-verification' }"
          class="nav-item"
          :class="{ active: $route.name === 'teacher-verification' }"
        >
          <span class="nav-icon">✅</span>
          <span class="nav-text">{{ t('message.teacherVerification') }}</span>
        </router-link>

        <router-link
          :to="{ name: 'admin-settings' }"
          class="nav-item"
          :class="{ active: $route.name === 'admin-settings' }"
        >
          <span class="nav-icon">⚙️</span>
          <span class="nav-text">{{ t('message.adminSettings') }}</span>
        </router-link>
      </nav>
    </aside>

    <header class="admin-header">
      <div class="header-left">
        <h1>{{ getPageTitle }}</h1>
      </div>
      <div class="header-right">
        <span class="welcome-text">{{ t('message.welcome') }}, {{ user?.username || 'Admin' }}</span>
        <a href="#" @click="logout" class="logout-link" style="color: #333; margin-left: 20px; text-decoration: none;">{{ t('message.logout') }}</a>
      </div>
    </header>

    <div class="main-container">
      <main class="admin-body">
        <router-view />
      </main>
    </div>

  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth';
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

export default {
  name: 'AdminLayout',
  setup() {
    const authStore = useAuthStore();
    const route = useRoute();
    const { t } = useI18n();

    const user = computed(() => authStore.user);
    const isLoggedIn = computed(() => authStore.isLoggedIn);

    const getPageTitle = computed(() => {
      const titles = {
        'admin-dashboard': 'message.adminDashboard',
        'teacher-verification': 'message.teacherVerification',
        'admin-settings': 'message.adminSettings'
      };

      const routeName = route.name;
      return titles[routeName] ? t(titles[routeName]) : t('message.adminPanel');
    });

    // 登出函数
    const logout = () => {
      authStore.logout();
    };

    return {
      user,
      isLoggedIn,
      getPageTitle,
      logout,
      t // 暴露t函数供模板使用
    };
  }
};
</script>

<style scoped>
.admin-layout {
  height: 100vh; /* 使用视口全高度 */
  display: flex;
  background-color: #f0f2f5;
}

.sidebar {
  width: 256px;
  background-color: #ffffff;
  color: #333;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 100;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 20px 24px 20px;
  border-bottom: 1px solid #f0f0f0;
  background-color: white;
}

.logo h2 {
  margin: 0;
  font-size: 18px;
  color: #1890ff;
  font-weight: 600;
}

.navigation {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: #595959;
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 0;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: #f6ffed;
  color: #52c41a;
  border-left: 3px solid #1890ff;
}

.nav-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-left: 3px solid #1890ff;
}

.nav-icon {
  margin-right: 12px;
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.nav-text {
  flex: 1;
  font-size: 14px;
}

.main-container {
  flex: 1;
  margin-left: 256px; /* 为sidebar预留空间 */
  margin-top: 64px; /* 为header预留空间 */
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  height: calc(100vh - 64px); /* 视口高度减去header高度 */
}

.admin-header {
  padding: 0 24px;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 256px; /* 为sidebar预留空间 */
  right: 0;
  z-index: 1050; /* 确保header在最顶层 */
}

.admin-header h1 {
  margin: 0;
  color: #001529;
  font-size: 18px;
  font-weight: 600;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.welcome-text {
  color: #001529;
  font-size: 16px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.admin-body {
  flex: 1; /* 占据所有可用空间 */
  padding: 24px;
  background-color: #f0f2f5;
  overflow: auto;
}

/* 优化AdminDashboard组件内部的间距 */
.admin-dashboard .stats-grid {
  margin-bottom: 24px;
}

.admin-dashboard .dashboard-content {
  margin-top: 24px;
}

.admin-dashboard .recent-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.admin-dashboard .recent-users,
.admin-dashboard .pending-teachers {
  margin-bottom: 0;
}

/* Element UI 类似的样式 */
.stat-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.data-table {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn {
  padding: 4px 15px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.btn:hover {
  color: #40a9ff;
  border-color: #40a9ff;
}

.btn-success {
  color: #fff;
  background-color: #52c41a;
  border-color: #52c41a;
}

.btn-success:hover {
  background-color: #73d13d;
  border-color: #73d13d;
}

.btn-danger {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}

.btn-danger:hover {
  background-color: #ff7875;
  border-color: #ff7875;
}

@media (max-width: 768px) {
  .sidebar {
    width: 80px;
  }

  .nav-text, .logo h2 {
    display: none;
  }

  .nav-icon {
    margin-right: 0;
    font-size: 18px;
    width: auto;
  }

  .main-container {
    margin-left: 80px;
  }

  .admin-header {
    left: 80px; /* 移动端 sidebar 宽度 */
    padding: 0 16px;
    z-index: 1050;
  }

  .admin-body {
    padding: 16px;
  }

  .admin-dashboard .recent-sections {
    grid-template-columns: 1fr;
  }
}
</style>